E-서버리스 실습

개요

레벨 100, 서버리스로 웹 호스팅 실습
https://catalog.us-east-1.prod.workshops.aws/workshops/600420b7-5c4c-498f-9b80-bc7798963ba3/ko-KR/serverless
Pasted image 20240626112240.png
이 모양을 만드는 게 목표이다.

실습

T-iam 유저 만들기
실습용 유저를 꼭 사용하도록 한다.

DynamoDB 세팅

Pasted image 20240626114544.png
다이나모디비는 NoSQL 디비로 키값쌍을 가진다.
테이블을 생성한다.
Pasted image 20240626114628.png
테이블의 데이터를 빠르게 찾기 위한 기본키로 파티션 키를 지정한다.
Pasted image 20240626114827.png
Pasted image 20240626114833.png
기다리다 보면 이렇게 완성된다!

Lambda 함수 사용

Pasted image 20240626115013.png
람다에 들어가면 어떻게 사용해야 하는지에 대한 간략한 정보가 표시된다.
Pasted image 20240626115057.png
함수 생성 시 3가지 옵션이 존재한다.
새로 작성은 기본이다.
블루프린트는 대중적으로 사용되는 일반 사례 세팅을 같이 해준다.
컨테이너 이미지는 이미지를 기반으로 환경을 세팅해준다.
Pasted image 20240626115217.png
기본적으로는 새로 작성하라고 나오나, 블루프린트도 사용해보도록 한다.
Pasted image 20240626115457.png
권한은 다이나모디비에 접근할 수 있는 권한만 있으면 된다.
Pasted image 20240626115604.png
블루프린트를 사용해서 이렇게 값이 채워져있다.
어차피 추후 수정할 수 있다.
Pasted image 20240626120403.png
블루프린트는 api 게이트웨이 생성 옵션도 제공해준다.
이게 아니면 나중에 직접 들어가서 만들어야 한다.
제거를 눌러도 된다!

import json
import boto3
import random
import json

def lambda_handler(event, context):
    
    member_name = ['Ama','Jone','Zon','Penny','Jessie']
    member_status = ['Happy','Sad','Serious','Satisfied','Free']
    
    dynamodb = boto3.resource('dynamodb',endpoint_url='http://dynamodb.ap-northeast-2.amazonaws.com')
    member_table = dynamodb.Table('hello-member')
    
    name = member_name[random.randint(0,4)]
    status = member_status[random.randint(0, 4)]
    
    member_table.put_item(
       Item={
            'name': name,
            'status': status,
        }
    )
    
    documents = {'name':name,'status':status}
    
    print(documents)
    
    return {
        'statusCode': 200,
        'headers': {'Access-Control-Allow-Origin': '*'},
        'body': json.dumps(documents)
    }

다음 창에서 더 많은 구성을 할 수 있다.
위의 코드로 파일을 먼저 수정한다.

Pasted image 20240626121029.png
테스트를 해보고 싶다면 여기에서.
생각되는 로직에 맞춰 이벤트를 구성하면 된다.
Pasted image 20240626121355.png
Deploy를 누르고 테스트해야 제대로 업데이트 된 소스 코드가 반영된다.
Pasted image 20240626121948.png
다이나모 디비와 별달리 연결하는 과정이 없었음에도 제대로 들어가지는 것이 확인된다.

API 게이트웨이 설정

사실 이게 없어도 람다 딴에서 전부 연결되도록 만드는 것고 가능하고, 심지어 웹 서비스에서 바로 다이나모 디비에 연결되게 하는 것도 가능은 하다.
그래도 이 기능을 활용할 때 형식을 지정하고 사용할 수 있다는 점이 좋다.
Pasted image 20240626122240.png
몇 가지 유형이 있는데, 람다를 연결해줄 것이기에 rest api를 사용한다.
Pasted image 20240626125508.png
중간 단계를 조금 생략했다.
하나의 api를 만들면, 그 안에 다양한 메서드를 지정할 수 있다.
이중에서 람다 함수와의 통합 옵션을 선택한다.
프록시 통합을 걸어줘야 람다 쪽에 설정된 프록시 설정이 제대로 먹힐 것으로 생각된다.
Pasted image 20240626125723.png
프록시의 역할은 람다의 응답을 자동으로 전달하는 역할이었다!
이게 없다면 수동으로 출력이 이어지도록 설정을 해야 하는 모양이다.

Pasted image 20240626125848.png
아직 끝난 것이 아니다.
웹사이트에서 사용을 위해 꼭 처리해야 하는 cors 처리를 해줘야 한다.
Pasted image 20240626125952.png
이렇게 나오면 성공이다.
스테이지도 설정을 해줘야 하는데, 이건 운영, 개발 단계를 구분해놓기 위해 존재한다.
Pasted image 20240626133905.png
스테이지 칸에서 URL을 확인할 수 있기도 하다.

S3 웹 호스팅

Pasted image 20240626130323.png
S3는 객체 스토리지인데, 다양한 용도로 사용이 가능하고 읽을 때만 비용이 발생한다.
사용하기 위해 기본적으로 버킷을 만들어야 하는데, 이름은 고유하게 지어야만 한다.
그래서 간단하게 자신의 iam 유저 정보를 넣어준다.
Pasted image 20240626130449.png
액세스 차단을 풀어야 다양한 컴퓨터에서 접속이 가능할 것이다.
어차피 html 파일만 가질 버킷이라 상괸없다.

<html>

<head>
    <meta charset="utf-8" name="viewport"
        content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Hello World!</title>
    <style>
        #title {
            font-family: arial;
            font-size: 2em;
            color: #eb971a;
            margin-top: 50px;
            text-align: center;
        }

        button {
            background-color: #eb971a;
            border: none;
            color: white;
            border-radius: 5px;
            width: 40%;
            height: 35px;
            font-size: 13pt;
            margin-top: 30px;
            text-align: center;
        }

        #sentence {
            font-size: 17pt;
            margin-top: 30px;
            font-weight: bold;
            color: #eb971a;
        }
    </style>
</head>

<body>
    <p id="title">Hello World From <b>Lambda</b></p>
    <hr id="lambda-line" width="800px" align="center" color="#eb971a;">
    <center><button onclick="checkEvent();">Who are you?</button></center>
    <center>
        <div id="sentence"></div>
    </center>
</body>
<script type="text/javascript">
    function checkEvent() {
        $.ajax({
            type: "GET",
            url: "https://7mt7y0qesf.execute-api.ap-northeast-2.amazonaws.com/dev",
            dataType: 'json',
            success: function (data) {
                document.getElementById('sentence').innerHTML = data.status + "&nbsp;&nbsp;" + data.name
            },
            error: function (error) {
                alert';
                console.log(error)
            }
        });
    }
</script>

</html>

이 파일에서 딱봐도 게이트웨이와 연동되는 것으로 보이는 URL 부분만 위에서 확인한 것으로 수정하고 index.html로 올리면 된다.
Pasted image 20240626134137.png
만들어진 버킷의 속성에 들어가서 이 기능을 활성화한다.
Pasted image 20240626134221.png
이렇게 페이지가 만들어지면 성공
Pasted image 20240626134245.png
그냥 들어가면 이런 문제가 발생한다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1709405011428",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": [
        "arn:aws:s3:::my-bucket-[본인버킷번호]",
        "arn:aws:s3:::my-bucket-[본인버킷번호]/*"
      ],
      "Principal": "*"
    }
  ]
}

이 내용을 속성 칸 옆 권한에 들어가서 추가해준다.
버킷에 저장된 객체 액세스 권한을 조절하는 부분이다.

확인

Pasted image 20240626135015.png
이렇게 페이지가 생기고, 중간 버튼을 누를 때 사람이 갱신된다면 성공이다.
웹페이지에 사람들이 접속할 때마다 S3의 데이터를 다운 받는 꼴이기 때문에 그때마다 비용이 발생한다.
그러나 이러한 방식으로 필요할 때만 데이터를 생성하고 돌려주는 방식으로 서비스를 만들면 실질적으로 거의 비용이 발생하지 않는다고 한다.

끝났으면 무조건 자원들을 삭제해야만 한다.